<template>
  <a-spin :spinning="loading">
    <div class="modal-header">
      <div class="modal-title">
        <safety-certificate-outlined />
        <span>
          {{ l('Permissions') }}
          <span v-if="userName"> - {{ userName }}</span>
        </span>
      </div>
    </div>
    <div class="modal-body">
      <!-- 提示 -->
      <a-alert
        :message="l('Note_RefreshPageForPermissionChanges')"
        type="warning"
        closable
        showIcon
      />
      <search-role-tree
        v-if="isshowPermissionTree"
        :multiple="true"
        :dropDownStyle="{ 'max-height': '500px' }"
        :selectedPermission="selectedPermission"
        @selectedPermissionChange="refreshGoFirstPage"
      >
      </search-role-tree>
    </div>
    <!-- 按钮 -->
    <div class="modal-footer">
      <a-button
        :disabled="saving"
        @click="resetPermissions()"
        :loading="resettingPermissions"
        type="button"
      >
        <reload-outlined />
        {{ l('ResetSpecialPermissions') }}
      </a-button>
      <a-button :disabled="saving || resettingPermissions" @click="close()" type="button">
        <close-circle-outlined />
        {{ l('Cancel') }}
      </a-button>
      <a-button :loading="saving || resettingPermissions" :type="'primary'" @click="handleSubmit()">
        <save-outlined />
        {{ l('Save') }}
      </a-button>
    </div>
  </a-spin>
</template>

<script lang="ts">
  import { ModalComponentBase } from '/@/shared/component-base';
  import {
    EntityDtoOfInt64,
    UpdateUserPermissionsInput,
    UserServiceProxy,
  } from '/@/shared/service-proxies';
  import {
    ReloadOutlined,
    CloseCircleOutlined,
    SaveOutlined,
    SafetyCertificateOutlined,
  } from '@ant-design/icons-vue';
  import SearchRoleTree from '/@/app/admin/roles/search-role-tree/index.vue';
  import { defineComponent } from 'vue';

  export default defineComponent({
    name: 'edit-user-permission',
    components: {
      SearchRoleTree,
      ReloadOutlined,
      SafetyCertificateOutlined,
      CloseCircleOutlined,
      SaveOutlined,
    },
    mixins: [ModalComponentBase],
    props: {
      id: Number,
      userName: String,
    },
    data() {
      return {
        // 选中的权限过滤
        selectedPermission: new Array<string>(),
        resettingPermissions: false,
        userServiceProxy: new UserServiceProxy(),
        isshowPermissionTree: false,
      };
    },

    mounted() {
      this.getData();
    },
    methods: {
      /**
       * 获取数据
       */
      getData() {
        if (this.id === undefined) return;
        this.loading = true;
        this.userServiceProxy
          .getPermissionsTreeForEdit(this.id)
          .finally(() => {
            this.loading = false;
          })
          .then((result) => {
            this.selectedPermission = result.grantedPermissionNames as Array<string>;
            this.isshowPermissionTree = true;
          });
      },
      /**
       * 提交表单
       */
      handleSubmit() {
        this.saving = true;
        this.loading = true;
        let input: UpdateUserPermissionsInput = new UpdateUserPermissionsInput();
        input.id = this.id as number;
        input.grantedPermissionNames = this.selectedPermission;
        this.userServiceProxy
          .updatePermissions(input)
          .finally(() => {
            this.saving = false;
            this.loading = false;
          })
          .then(() => {
            this.notify.success(this.l('SavedSuccessfully'));
            this.success(true);
          });
      },
      /**
       * 选择完权限过滤
       */
      refreshGoFirstPage(data) {
        this.selectedPermission = data;
      },
      /**
       * 重置权限
       */
      resetPermissions() {
        let input: EntityDtoOfInt64 = new EntityDtoOfInt64();
        input.init({ id: this.id });
        this.resettingPermissions = true;
        this.userServiceProxy
          .resetSpecificPermissions(input)
          .finally(() => {
            this.resettingPermissions = false;
          })
          .then(() => {
            this.notify.success(this.l('ResetSuccessfully'));
            this.getData();
          });
      },
    },
  });
</script>

<style scoped lang="less">
  .modal-header {
    .anticon {
      margin-right: 10px;
    }
  }
  .ant-alert {
    margin-bottom: 10px;
  }
</style>
